<!DOCTYPE html>
<!--
Copyright (C) 2015 Vishal Gupta<ims.vishal@gmail.com>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html>
    <head>
        <title>Tooltips</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            section {
                width: 900px;
                margin: 0 auto;
            }
            div {
                overflow: hidden;
                padding: 50px 200px;;
            }
            a.tooltips {
                position: relative;
                display: inline;
            }
            a.tooltips span {
                position: absolute;
                width:140px;
                color: #FFFFFF;
                background: #000000;
                height: 30px;
                line-height: 30px;
                text-align: center;
                visibility: hidden;
                border-radius: 6px;
            }
            a.tooltips span:after {
                content: '';
                position: absolute;
                width: 0; height: 0; 
            }
            a:hover.tooltips span {
                visibility: visible;
                opacity: 0.8;
                z-index: 999;
            }

            a.tooltips[data-position="below"] span:after {
                bottom: 100%;
                left: 50%;
                margin-left: -8px;
                border-bottom: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }
            a:hover.tooltips[data-position="below"] span {
                top: 30px;
                left: 50%;
                margin-left: -76px;
            }

            a.tooltips[data-position="above"] span:after {
                top: 100%;
                left: 50%;
                margin-left: -8px;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }
            a:hover.tooltips[data-position="above"] span {
                bottom: 30px;
                left: 50%;
                margin-left: -76px;
            }
            a.tooltips[data-position="left"] span:after {
                top: 50%;
                left: 100%;
                margin-top: -8px;
                border-left: 8px solid #000000;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
            }
            a:hover.tooltips[data-position="left"] span {
                right: 100%;
                top: 50%;
                margin-top: -15px;
                margin-right: 15px;
            }
            a.tooltips[data-position="right"] span:after {
                top: 50%;
                right: 100%;
                margin-top: -8px;
                border-right: 8px solid #000000;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
            }
            a:hover.tooltips[data-position="right"] span {
                left: 100%;
                top: 50%;
                margin-top: -15px;
                margin-left: 15px;
            }
        </style>
    </head>
    <body>
        <section>
            <div>
                <a class="tooltips" data-position="below" href="#">Tooltip below
                    <span>Tooltip</span></a>
            </div>
            <div>
                <a class="tooltips" data-position="left" href="#">Tooltip on left
                    <span>Tooltip</span></a>
            </div>
            <div>
                <a class="tooltips" data-position="above" href="#">Tooltip on top
                    <span>Tooltip</span></a>
            </div>
            <div>
                <a class="tooltips" data-position="right" href="#">Tooltip on right
                    <span>Tooltip</span></a>
            </div>
        </section>
    </body>
</html>
